<template>
    <div>
        <canvas id="canvas"></canvas>
    </div>
</template>
<script>
export default {
    mounted(){
        let canvas=document.getElementById('canvas')
        let ctx=canvas.getContext('2d')
        canvas.width=200
        canvas.height=400

        ctx.moveTo(0,0)
        ctx.lineTo(110,120)
        ctx.stroke()

        ctx.moveTo(100,0)
        ctx.arc(75,75,50,0,Math.PI,false)
        ctx.stroke()
        
        ctx.moveTo(200,200)
        ctx.arc(200,200,100,0,Math.PI,false)
        ctx.stroke()
    },
    methods:{
        initCanvas() {
            console.log("初始化canvas")
            canvas = document.getElementById('canvas');
            ctx = canvas.getContext('2d');
            canvas.width = window.innerWidth
            canvas.height = window.innerHeight
        }
    }
}
</script>
<style scoped>
    .box{
        background: grey;    
        min-height: 40px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .box2{
        background: white;
        width: 20px;
    }
</style>